<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<title>全国少儿世界和平海报作品征集活动</title>
<link href="/Public/css/maint.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="/Public/css/gyBase.css">
<link href="/Public/css/font.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/Public/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Public/js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="/Public/js/main.js"></script>
<script type="text/javascript" src="/Public/js/common.js"></script>
<script type="text/javascript">
	$(function() {
		/*瀑布流开始*/
		var container = $('#ulWaterfall');
		var loading = $('#imloading');
		// 初始化loading状态
		loading.data("on", true);				
		/*模拟从后台获取到的数据*/
		var sqlJson = [];
		 var load = function(sqlJson) {
			 console.log( sqlJson );
			if ( sqlJson.size <= 0 ) {
				loading.text('只有这么多了！');
			} else {
				var html = "";
				for (var i in sqlJson.datas ) {
				html +="<li class='item'><a href='/?m=wap&c=praise&a=fetch_one&praise={$praise}&id="+sqlJson.datas[i].id+"'>"+"<img src='" + sqlJson.datas[i].pic + "'></a>";
				html +="<div class='divNum'></div>";
				html +="<span class='spanHeart'><span class='icon iconfont icon-aixin2'></span>"+sqlJson.datas[i].votes+"</span>";
				html +="<span class='spanNum'>"+"编号："+sqlJson.datas[i].id+"</span>";
				html +="<div class='workName'>"+sqlJson.datas[i].show_name+"</div>";
				html +="<div class='authorName'>"+"作者姓名："+sqlJson.datas[i].author_name+"</div>";
				html +="<div class='teacher'>"+"指导老师："+sqlJson.datas[i].teacher_name+"</div>";
                if( !!sqlJson.datas[i].support_team ){
				    html +="<div class='fwd'>"+"服务队："+sqlJson.datas[i].support_team+"</div>";
                }
				html +="<div class='divPraise'><a href='/?m=wap&c=praise&a=fetch_one&praise={$praise}&id="+sqlJson.datas[i].id+"'><div class='like'>给TA添人气</div></a></div></li>";
				}
				var time = setTimeout(function() {
					var newElems = $(html).css({
						opacity: 0
					}).appendTo(container);
					newElems.imagesLoaded(function() {
						newElems.animate({
							opacity: 1
						}, 10);	
						container.masonry('appended', newElems, true);
						loading.data("on", true).fadeOut();
						clearTimeout(time);
					});
				}, 10)
			}
		};
	
		common.teacher.fetchStudentsJson( { praise_id: "{$praise}", teacher_name: "{$teacher[ 'teacher_name' ]}", teacher_telephone: "{$teacher[ 'teacher_telephone' ]}"}, load );

		$(window).scroll(function() { 
			if (!loading.data("on")) return;
			
			var itemNum = $('#waterfull').find('.item').length;
			var itemArr = [];
			itemArr[0] = $('#waterfull').find('.item').eq(itemNum - 1).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
			itemArr[1] = $('#waterfull').find('.item').eq(itemNum - 2).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
			itemArr[2] = $('#waterfull').find('.item').eq(itemNum - 3).offset().top + $('#waterfull').find('.item').eq(itemNum - 1)[0].offsetHeight;
			var maxTop = Math.max.apply(null, itemArr);
			if (maxTop < $(window).height() + $(document).scrollTop()) {
				//加载更多数据
				loading.data("on", false).fadeIn();
				common.teacher.fetchStudentsJson( { praise_id: "{$praise}", teacher_name: "{$teacher[ 'teacher_name' ]}", teacher_telephone: "{$teacher[ 'teacher_telephone' ]}"}, load );
			}
		});
	})
</script>
</head>	
<body style="background-color:#eee;">
<include file="Tpl/header" praise="{$praise}"/>
<div id="main">
	<div class="h1Teacher">{$teacher['teacher_name']} 排名{$teacher['rank']}名</div>
    <p class="pTeacher">指导作品总计<em>{$teacher['counts']}</em>幅，累计投总数<em>{$teacher['votes']}</em>票</p>
    <h1 class="teacherTitle boxSize">指导作品</h1>
    <div class="content">
    	<div class="waterFallBox" id="waterfull">
            <ul id="ulWaterfall">
            </ul>
    	</div>
    	<div id="imloading" class="loading">加载中</div>
    </div>
</div>
<include file="Tpl/footer" praise="{$praise}"/>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript">
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '{$wxuser["appid"]}', // 必填，公众号的唯一标识
            timestamp: "{$timestamp}", // 必填，生成签名的时间戳
            nonceStr: '{$nonceStr}', // 必填，生成签名的随机串
            signature: '{$wxSha1}',// 必填，签名，见附录1
            jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        wx.error(function(res){
            console.log(res);
    		// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
        wx.ready( function( e ){
        	wx.onMenuShareAppMessage({
			    title: "参与【和平海报】活动  让公益成为社会生活方式", // 分享标题
			    desc: "为身边的小画家加油，给孩子们一个向更多人展示作品的机会，播撒和平的种子、树立公益思想、拓展创意思维、培养全球观念。", // 分享描述
			    link: location.protocol + "//" + window.location.hostname + "/" + "index.php?m=wap&c=praise&a=index&praise={$praise}", // 分享链接
			    imgUrl: location.protocol + "//" + window.location.hostname + "/" + "Public/images/praise/sharepeaceSmall.jpg", // 分享图标
			    type: 'link', // 分享类型,music、video或link，不填默认为link
			    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
			    success: function () { 
			        // 用户确认分享后执行的回调函数
			    },
			    cancel: function () { 
			        // 用户取消分享后执行的回调函数
			    }
			});
			wx.onMenuShareTimeline({
			    title: "参与【和平海报】活动  让公益成为社会生活方式", // 分享标题
			    link: location.protocol + "//" + window.location.hostname + "/" + "index.php?m=wap&c=praise&a=index&praise={$praise}", // 分享链接
			    imgUrl: location.protocol + "//" + window.location.hostname + "/" + "Public/images/praise/sharepeaceSmall.jpg", // 分享图标
			    success: function () { 
			        // 用户确认分享后执行的回调函数
			    },
			    cancel: function () { 
			        // 用户取消分享后执行的回调函数
			    }
			});
        })
    </script>
<script src="/Public/js/jquery.lazyload.js"></script>
<script type="text/javascript" src="/Public/js/jquery.slides.js"></script>
<script type="text/javascript">
$(function(){
	$("#slides img").lazyload({effect: "fadeIn"});
});
 $(function(){
  $("#slides").slidesjs({
    start: 1,
    navigation:{
      active: false,
      effect: "fade"
    },
    play: {
      auto: true,
    },
    effect: {
      slide: {
        speed: 500
      },
      fade: {
        speed: 500,
        crossfade: true
      }
    }
  });
});
</script>
</body>
</html>
